<template>
    <div class="app-container">
      <!-- 导航栏 -->
      <el-tabs v-model="activeTab" class="tabs">
        <el-tab-pane label="基础参数" name="basicParams"></el-tab-pane>
        <el-tab-pane label="功能参数" name="functionParams"></el-tab-pane>
        <el-tab-pane label="价格策略设置" name="priceStrategy"></el-tab-pane>
        <el-tab-pane label="单据价格计算规则" name="priceCalcRule"></el-tab-pane>
      </el-tabs>
  
      <!-- 基础参数内容 -->
      <div v-if="activeTab === 'basicParams'" class="tab-content">
        <el-form label-width="120px">
          <el-form-item label="公司名称">
            <el-input value="云进销存体验账套" disabled></el-input>
          </el-form-item>
          <el-form-item label="公司地址">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="公司电话">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="公司传真">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="公司邮编">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="启用时间">
            <el-input value="2022-01-01" disabled></el-input>
          </el-form-item>
          <el-form-item label="本位币">
            <el-input value="RMB" disabled></el-input>
          </el-form-item>
          <el-form-item label="数量小数位">
            <el-select placeholder="请选择">
              <el-option label="0" value="0"></el-option>
            </el-select>
            <div class="tips">小数位由小改大后将不能再改小，请慎重！</div>
          </el-form-item>
          <el-form-item label="单价小数位">
            <el-select placeholder="请选择">
              <el-option label="2" value="2"></el-option>
            </el-select>
            <div class="tips">小数位由小改大后将不能再改小，请慎重！</div>
          </el-form-item>
          <el-form-item label="存货计价方法">
            <el-radio-group>
              <el-radio label="移动平均法">移动平均法</el-radio>
              <el-radio label="先进先出法">先进先出法</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="不允许负库存">
            <el-checkbox>参数勾选表示商品不允许负数出库</el-checkbox>
          </el-form-item>
          <el-form-item label="流失客户定义设置">
            <el-select placeholder="请选择">
              <el-option label="90" value="90"></el-option>
            </el-select>
            <span>天，无交易老客户数</span>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
  
      <!-- 功能参数内容 -->
      <div v-if="activeTab === 'functionParams'" class="tab-content">
        <!-- 添加带滚动条的容器 -->
        <div class="scroll-container">
          <el-table :data="functionParamsTableData" border style="width: 100%">
            <el-table-column prop="function" label="功能" />
            <el-table-column prop="operation" label="操作">
              <template #default="scope">
                <el-checkbox v-model="scope.row.checked"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column prop="description" label="说明" />
          </el-table>
        </div>
        <el-button type="primary" style="margin-top: 10px;">保存</el-button>
      </div>
  
      <!-- 价格策略设置内容 -->
      <div v-if="activeTab === 'priceStrategy'" class="tab-content">
        <h3>价格取数优先级</h3>
        <el-table :data="priceStrategyTableData" border style="width: 100%">
          <el-table-column prop="source" label="销售价来源/采购价来源" />
          <el-table-column prop="enabled" label="启用">
            <template #default="scope">
              <el-switch v-model="scope.row.enabled"></el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="priority" label="优先级" />
          <el-table-column prop="operation" label="操作">
            <template #default="scope">
              <el-button size="mini" @click="handleMoveUp(scope.$index)" 
                :disabled="scope.$index === 0">上移</el-button>
              <el-button size="mini" @click="handleMoveDown(scope.$index)" 
                :disabled="scope.$index === priceStrategyTableData.length - 1">下移</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="description" label="说明" />
        </el-table>
        <h3 style="margin-top: 20px;">价格限价策略</h3>
        <el-form label-width="120px">
          <el-form-item label="销售价限价">
            <el-switch v-model="salesPriceLimit.enabled"></el-switch>
            <span>启用后，当实际销售价，低于</span>
            <el-select v-model="salesPriceLimit.type" style="width: 120px; margin: 0 5px;">
              <el-option label="最低销售价" value="lowestSalesPrice"></el-option>
            </el-select>
            <span>时，</span>
            <el-checkbox-group v-model="salesPriceLimit.triggers">
              <el-checkbox label="销货单保存和审核时">销货单保存和审核时</el-checkbox>
              <el-checkbox label="销货订单保存和审核时">销货订单保存和审核时</el-checkbox>
              <el-checkbox label="购货单保存和审核时">购货单保存和审核时</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </div>
  
      <!-- 单据价格计算规则内容 -->
      <div v-if="activeTab === 'priceCalcRule'" class="tab-content">
        <el-radio-group v-model="priceCalcRule.radio1">
          <el-radio label="折扣不变，单价和含税单价变">折扣不变，单价和含税单价变</el-radio>
          <el-radio label="折扣变，单价和含税单价不变">折扣变，单价和含税单价不变</el-radio>
        </el-radio-group>
        <el-radio-group v-model="priceCalcRule.radio2" style="margin-top: 10px;">
          <el-radio label="折扣不变，单价和含税单价变">折扣不变，单价和含税单价变</el-radio>
          <el-radio label="折扣变，单价和含税单价不变">折扣变，单价和含税单价不变</el-radio>
        </el-radio-group>
        <el-radio-group v-model="priceCalcRule.radio3" style="margin-top: 10px;">
          <el-radio label="税率不变，金额不变，价税合计变">税率不变，金额不变，价税合计变</el-radio>
          <el-radio label="税率不变，金额变，价税合计不变">税率不变，金额变，价税合计不变</el-radio>
        </el-radio-group>
        <el-radio-group v-model="priceCalcRule.radio4" style="margin-top: 10px;">
          <el-radio label="税额变，金额不变，价税合计变">税额变，金额不变，价税合计变</el-radio>
          <el-radio label="税额变，金额变，价税合计不变">税额变，金额变，价税合计不变</el-radio>
        </el-radio-group>
        <el-button type="primary" style="margin-top: 10px;">保存</el-button>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const activeTab = ref('basicParams');
  
  // 功能参数表格数据
  const functionParamsTableData = ref([
    { function: '启用审核', operation: { checked: true }, description: '(启用后单据只有在审核后才会生效，报表数据才会变化)' },
    { function: '启用税金', operation: { checked: true }, description: '增值税税率 0%' },
    { function: '商品价格是否含税', operation: { checked: true }, description: '勾选后，商品资料中预设的采购和销售价格，对应购货、销货类单据中的含税单价列，不勾选则对应不含税单价列' },
    { function: '启用分仓核算', operation: { checked: false }, description: '(启用后将商品的成本将根据各分仓核算,未启用根据总仓核算)' },
    { function: '启用辅助属性', operation: { checked: true }, description: '(启用后允许商品新增服装、尺码等自定义属性)' },
    { function: '启用序列号', operation: { checked: true }, description: '(启用后将新增商品序列号管理功能)' },
    { function: '启用批次保质期管理', operation: { checked: true }, description: '(启用后将新增商品保质期管理功能)' },
    { function: '启用读取批次实时信息', operation: { checked: false }, description: '(启用后录入业务单据时，读取批次实时的产地、注册证号、生产许可证号，若批次没有对应的产地、注册证号、生产许可证号则为空。)' },
    { function: '启用自动出库最早批次', operation: { checked: true }, description: '(启用后录入出库类单据时，会自动选择商品最早时间的批次)' },
    { function: '启用自动填充结算金额', operation: { checked: false }, description: '(启用后将自动填充付款金额)' },
    { function: '启用销售单价为0时提示', operation: { checked: false }, description: '启用后销售单价为0时，销货类单据保存或审核时会提示' },
    { function: '启用采购单价为0时提示', operation: { checked: false }, description: '启用后购货单价为0时，购货类单据保存或审核时会提示' },
    { function: '启用销售类单据不允许修改单据日期：(销货订单、销货单、销货退货单)', operation: { checked: { 网页版: false, 移动端: true } }, description: '启用后，在进销存网页版/移动端（精斗云APP）新增销货订单、销货单、退货单时，默认为当前日期，且不允许修改' },
    { function: '开票金额取优惠后金额', operation: { checked: false }, description: '启用后开票金额取值为优惠后的金额，反之则取价税合计金额（注意！本参数勾选后将不能取消！）' },
    { function: '启用单据新增客户/供应商取上一次的值：(购货类单据、销货类单据)', operation: { checked: false }, description: '勾选后新增购货类单据、销货类单据会默认取上一次的供应商、客户，不勾选新增购货类单据、销货类单据供应商、客户默认为空' },
    { function: '启用采购数量不允许大于待采购数量', operation: { checked: true }, description: '启用后，以销定购看板生成的购货订单，购货订单的采购数量大于待采购数量时保存/审核会提示' },
    { function: '启用销货类单据新增销售人员默认取上一张单据的值', operation: { checked: false }, description: '若客户资料设置了默认销售员则每次开单都默认该销售员，不受参数控制 勾选后新增销货类单据以单据作为判断条件，销售员会取上一张单据的销售员；不勾选则以客户作为判断条件，销售员取该客户上一次开单的销售人员。' },
    { function: '启用单据保存出现商品重复进行提示', operation: { checked: false }, description: '启用后，当单据的商品+属性+单位+批次重复，保存会进行提示，目前支持的单据有销货单、销货退货单、购货单、购货退货单' },
    { function: '启用物流服务', operation: { checked: true }, description: '开启后，可从销货单/其他出库单等单据下推或手工创建物流服务，并完成物流轨迹查询、快递单自助打印和上门取件业务' },
    { function: '启用不允许购货单数量大于购货订单数量', operation: { checked: true }, description: '启用后，只有当购货单的入库数量小于等于其关联的购货订单的剩余订货数量才能入库成功，否则会提示无法入库，此设置的目的是防止超订入库' },
    { function: '启用不允许销货单数量大于销货订单数量', operation: { checked: true }, description: '启用后，只有当销货单的出库数量小于等于其关联的销货订单的剩余订单数量才能出库成功，否则会提示无法出库，此设置的目的是防止超订出库' },
    { function: '启用智慧盘点', operation: { checked: false }, description: '(启用后将新增智慧盘点模块)' },
    { function: '启用零售', operation: { checked: false }, description: '启用前须购买并激活云POS服务，启用后将能够使用云POS进行门店收银管理' },
    { function: '启用反审核参数', operation: { checked: false }, description: '单据审核后 销货订单,销货单,销货退货单,购货订 3 天内允许反审核，超过该天数后不允许反审核，管理员角色除外' },
    { function: '启用销货单必须从销货订单下推', operation: { checked: false }, description: '启用后，不能单独新增销货单，只能从销货订单下推或则下推后折行选择其他订单。' },
    { function: '启用整件散包小数显示模式', operation: { checked: false }, description: '启用后，在整件散包列，不启用显示1箱2包，启用显示1.2包。' },
    { function: '启用部门', operation: { checked: false }, description: '启用后，单据出现部门字段并支持按部门维度统计' },
    { function: '启用项目', operation: { checked: false }, description: '启用后，单据出现项目字段并支持按项目维度统计' },
    { function: '启用入库单据自动反写商品资料', operation: { checked: false }, description: '启用后采购订单、采购单、其他入库单填写产地、注册证号、生产许可证号、供应商时，系统会自动将这些信息反向更新至相应的商品资料中。' },
    { function: '启用不允许新增同名客户', operation: { checked: { 不允许同名: false, 不允许相似: false } }, description: '勾选后，新增客户时，将不允许新增客户名称相同/相似的客户，英文忽略大小写不允许相似（相似：新增的客户名称已存在现有客户的名称中）' },
    { function: '启用销货类单据切换客户取价提示', operation: { checked: true }, description: '启用后，销货类单据切换客户会提示更新商品价格；不启用，则不提示且不更新商品价格' },
  ]);
  
  // 价格策略表格数据
  const priceStrategyTableData = ref([
    { source: '最近售价', enabled: true, priority: 1, operation: '下移', description: '启用后会根据客户自动带入商品的上一次销售价（未审核单据也会更新最近价）' },
    { source: '商品价格策略', enabled: true, priority: 2, operation: '上移 下移', description: '启用后会根据客户等级来取商品价格策略中维护的值，如选择的是批发客户，则取商品对应的批发价' },
    { source: '最近报价', enabled: false, priority: 3, operation: '上移', description: '启用后会根据客户报价单自动带出最近一次的商品报价' },
    { source: '商品价格策略', enabled: true, priority: 1, operation: '下移', description: '启用后会取商品管理中商品维护的预计采购价' },
    { source: '最近采购价', enabled: true, priority: 2, operation: '上移', description: '启用后会根据供应商自动带入商品的上一次采购价（未审核单据也会更新最近价）' },
    { source: '预计参考单位成本', enabled: true, priority: 1, operation: '下移', description: '启用后会将商品资料里面设置的预计采购价作为预计参考单位成本' },
    { source: '实时参考单位成本', enabled: false, priority: 2, operation: '上移', description: '启用后会将做单时库存余额表的实时单位成本来计算实时参考单位成本' },
  ]);
  
  // 价格限价策略数据
  const salesPriceLimit = ref({
    enabled: false,
    type: 'lowestSalesPrice',
    triggers: [],
  });
  
  // 单据价格计算规则数据
  const priceCalcRule = ref({
    radio1: '折扣不变，单价和含税单价变',
    radio2: '折扣不变，单价和含税单价变',
    radio3: '税率不变，金额不变，价税合计变',
    radio4: '税额变，金额不变，价税合计变',
  });
  </script>
  
  <style scoped>
  .app-container {
    padding: 20px;
  }
  .tabs {
    margin-bottom: 20px;
  }
  .tab-content {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    height: 800px;
  }
  .tips {
    color: #909399;
    font-size: 12px;
    margin-top: 5px;
  }
  .el-table {
    margin-bottom: 15px;
  }
  .el-radio {
    margin-right: 20px;
  }
  
  /* 新增滚动容器样式 */
  .scroll-container {
    max-height: 700px;
    overflow-y: auto;
    margin-bottom: 10px;
  }
  </style>  